<template>
  <div>
    <div style="margin-top: 20px">
      <el-button
        size="small"
        type="success"
        @click="dialog_add = true"
        icon="el-icon-plus"
        >新增</el-button
      >
    </div>
    <div>
      <el-table :data="categorys" style="width: 80%">
        <el-table-column label="编号" width="230">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="230">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="文章数量" width="230">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.count }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 对话框 新建分类专栏 -->
    <el-dialog title="新建分类专栏" :visible.sync="dialog_add" width="30%">
      <el-form status-icon label-width="120px">
        <el-form-item label="分类专栏名">
          <el-input
            v-model="type_add.name"
            placeholder="请输入要新建的分类专栏名"
            :rules="{
              required: true,
              message: '文章类型不能为空',
              trigger: 'blur',
            }"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_add = false">取 消</el-button>
        <el-button type="primary" @click="addNewType">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 对话框 编辑分类专栏 -->
    <el-dialog title="编辑分类专栏" :visible.sync="dialog_edit" width="30%">
      <el-form status-icon label-width="120px">
        <el-form-item label="分类专栏名">
          <el-input
            v-model="type_edit.name"
            :rules="{
              required: true,
              message: '文章类型不能为空',
              trigger: 'blur',
            }"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_edit = false">取 消</el-button>
        <el-button type="primary" @click="updateType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Category",
  data() {
    return {
      categorys: [],
      currentPage: 1, //当前页
      total: 0, //总记录数
      pagesize: 5, //页面大小
      dialog_add: false, //添加分类的对话框
      dialog_edit: false, //编辑分类的对话框
      type_add: {
        name: "", //分类名称
      },
      type_edit: {
        id: "",
        name: "",
      },
    };
  },
  mounted() {
    this.initType();
  },
  methods: {
    //初始化分类数据
    initType() {
      const _this = this;
      this.getRequest("/api/category/admin/list").then((resp) => {
        console.log(resp);
        _this.categorys = resp.data;
      });
    },
    //编辑分类
    handleEdit(index, row) {
      const _this = this;
      this.dialog_edit = true;
      this.getRequest("/api/category/admin/getCategoryById/" + row.id).then((resp) => {
        console.log(resp);
        _this.type_edit = resp.data;
      });
    },
    //更新分类
    updateType() {
      const _this = this;
      this.putRequest("/api/category/admin/update", this.type_edit).then((resp) => {
        if (resp.flag) {
          this.initType();
          _this.dialog_edit = false;
        }else{
          this.$message.error(resp.message);
        }
      });
    },
    //删除分类
    handleDelete(index, row) {
      console.log(index, row);
      const _this = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteRequest("/api/category/admin/delete/" + row.id).then(
            (resp) => {
              if (resp) {
                this.initType();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加分类
    addNewType() {
      const _this = this;
      this.postRequest("/api/category/admin/save", this.type_add).then((resp) => {
        console.log(resp);
        _this.input_name = "";
        _this.dialog_add = false;
        this.initType();
      });
    },
    //搜索分类
    search_name() {
      const _this = this;
      this.getRequest("/api/type/getTypeByName?name=" + this.input_name).then(
        (resp) => {
          if (_this.input_name == "") {
            _this.initTag();
          } else {
            _this.typeData = resp.data;
            _this.input_name = "";
            // console.log(_this.typeData)
          }
        }
      );
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.initType();
    },
  },
};
</script>

<style scoped>
</style>
